<template>
  <view class="login">
    <!-- #ifndef  H5 -->
    <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
      <u-navbar
          :is-back="true"
          :title-bold="true"
          :is-fixed="false"
          :border-bottom="false"
          back-icon-name="arrow-leftward"
          back-icon-color="#000000"
          :background="{ background: 'rgba(256,256, 256,0)' }"
      ></u-navbar>
    </u-sticky>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="mpwx-login">
      <image class="logo" :src="appConfig.shop_login_logo" mode="heightFix"></image>
      <view class="mt20 title-info">
        <view class="title">企务通</view>
        <view class="service">为了更好的为您提供服务,请您先完成授权登录</view>
      </view>
      <button size="lg" class="white flex row-center btn" @click="mnpLoginFun">
        <text>手机号授权登录</text>
      </button>
      <view style="width: 100%;margin-top: 50rpx">
        <u-checkbox v-model="isAgree" shape="circle">
          <view class="sm row sm-24">
            已阅读并同意
            <navigator
                class="primary"
                hover-class="none"
                url="/bundle/pages/server_explan/server_explan?type=0"
            >
              《企务通用户协议》
            </navigator>
            和
            <navigator
                class="primary"
                hover-class="none"
                url="/bundle/pages/server_explan/server_explan?type=1"
            >
              《企务通隐私政策》
            </navigator>
          </view>
        </u-checkbox>
      </view>
    </view>

    <mplogin-popup
        v-model="showLoginPop"
        :logo="appConfig.shop_login_logo"
        :title="appConfig.website_name"
        @close="closePopup"
        @update="handleSubmitInfo"
    />
    <!--  #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view class="account-login">
      <image class="logo" :src="appConfig.shop_login_logo"></image>
      <block v-if="isPhonelogin == 1">
        <button
            size="lg"
            class="white flex row-center btn"
            @click="getCodeUrl"
            v-if="isWeixin"
        >
          <text>用户一键登录</text>
        </button>
        <!-- #ifdef APP-PLUS -->
        <button size="lg" class="white flex row-center btn" @click="appWxLogin">
          <text>用户一键登录</text>
        </button>
        <!-- #endif -->

        <button size="lg" class="flex row-center phonebtn" @click="isPhonelogin = 0">
          <text>手机号登录</text>
        </button>

        <view class="row-start mb20 mt20" style="width: 100%">
          <u-checkbox v-model="isAgree" shape="circle">
            <view class="sm row-start">
              已阅读并同意
              <navigator
                  class="primary"
                  hover-class="none"
                  url="/bundle/pages/server_explan/server_explan?type=0"
              >
                《服务协议》
              </navigator>
              和
              <navigator
                  class="primary"
                  hover-class="none"
                  url="/bundle/pages/server_explan/server_explan?type=1"
              >
                《隐私协议》
              </navigator>
            </view>
          </u-checkbox>
        </view>
      </block>
      <block v-if="isPhonelogin == 0">
        <view>
          <view v-if="loginType == 0">
            <view class="input row" style="padding: 15rpx">
              <u-input
                  v-model="account"
                  style="width: 100%"
                  placeholder="请输入账户"
                  :input-border="false"
              />
            </view>
            <view class="input row" style="padding: 15rpx">
              <u-input
                  v-model="password"
                  type="password"
                  style="flex: 1"
                  :password-icon="false"
                  placeholder="请输入密码"
                  :input-border="false"
              />
              <navigator
                  style="
                                    width: 132rpx;
                                    border-left: 1rpx solid #ccc;
                                    padding-left: 30rpx;
                                "
                  url="/pages/forget_pwd/forget_pwd"
                  hover-class="none"
              >忘记密码
              </navigator
              >
            </view>
          </view>
          <view v-if="loginType == 1">
            <view class="input row" style="padding: 15rpx">
              <u-input
                  type="number"
                  v-model="telephone"
                  style="width: 100%"
                  placeholder="请输入手机号"
                  :input-border="false"
              />
            </view>
            <view class="input row" style="padding: 15rpx">
              <u-input
                  v-model="smsCode"
                  style="flex: 1"
                  placeholder="请输入验证码"
                  :input-border="false"
              />
              <view class="row">
                <view class="sms-btn primary sm row-center br60" @click="$sendSms">
                  <view v-show="canSendSms">获取验证码</view>
                  <u-count-down
                      ref="countDown"
                      :show-days="false"
                      :timestamp="time"
                      :showColon="false"
                      separator="zh"
                      color="#FF2C3C"
                      separator-color="#FF2C3C"
                      :show-hours="false"
                      :show-minutes="false"
                      :autoplay="false"
                      v-show="!canSendSms"
                      @end="countDownFinish()"
                  />
                </view>
              </view>
            </view>
          </view>
          <view class="row-start mb20 mt20" style="width: 100%">
            <u-checkbox v-model="isAgree" shape="circle">
              <view class="sm row-start">
                已阅读并同意
                <navigator
                    class="primary"
                    hover-class="none"
                    url="/bundle/pages/server_explan/server_explan?type=0"
                >
                  《服务协议》
                </navigator>
                和
                <navigator
                    class="primary"
                    hover-class="none"
                    url="/bundle/pages/server_explan/server_explan?type=1"
                >
                  《隐私协议》
                </navigator>
              </view>
            </u-checkbox>
          </view>
          <button
              style="margin: 0rpx 0 50rpx; width: 680rpx"
              size="lg"
              class="flex row-center btn"
              type="primary"
              @click="loginFun"
              :class="{ inactive }"
          >
            登录
          </button>
          <view class="row-between" style="width: 680rpx">
            <view class="lighter" @click="changeLoginType">{{
                loginType == 0 ? '短信验证码登录' : '账号登录'
              }}
            </view>
            <navigator class="lighter" url="/pages/register/register" hover-class="none"
            >注册账号
            </navigator
            >
          </view>
        </view>
      </block>
      <!-- <view class="flex1 wx-login">
  <view v-if="appConfig.app_wechat_login" class="column-center">
    <u-divider>其他登录方式</u-divider>
    <view @click="appWxLogin">
      <image class="image" src="/static/images/icon_wechat.png"></image>
      <view class="sm">微信登录</view>
      <text selectable>{{ text }}</text>
    </view>
  </view>
</view> -->
    </view>
    <!--  #endif -->
    <!-- 阅读协议弹框 -->
    <u-modal
        :value="showModel"
        show-cancel-button
        :show-title="false"
        @confirm=";(isAgree = true), (showModel = false)"
        @cancel="showModel = false"
        confirm-color="#FF2C3C"
    >
      <view class="comfirm-box">
        <view> 请先阅读并同意</view>
        <view class="flex row-center">
          <navigator
              class="primary"
              hover-class="none"
              url="/bundle/pages/server_explan/server_explan?type=0"
          >
            <view class="agreement">《服务协议》</view>
          </navigator>
          和
          <navigator
              class="primary"
              hover-class="none"
              url="/bundle/pages/server_explan/server_explan?type=1"
          >
            <view class="agreement">《隐私协议》</view>
          </navigator>
        </view>
      </view>
    </u-modal>
    <!-- #ifdef MP-WEIXIN -->
    <!-- 用户隐私协议弹框 -->
    <privacy-popup v-model="showPrivacyPopup"></privacy-popup>
    <!-- #endif -->
  </view>
</template>

<script>
import {mapMutations, mapActions, mapGetters} from 'vuex'
import {
  accountLogin,
  codeLogin,
  sendSms,
  wxpLogin,
  smsCodeLogin,
  opLogin,
  authLogin,
  updateUser
} from '@/api/app'
import {inputInviteCode} from '@/api/user'
import wechath5 from '@/utils/wechath5'
import {isWeixinClient, currentPage, client} from '@/utils/tools'
import {} from '@/utils/tools'
import {SMSType} from '@/utils/type'
import Cache from '@/utils/cache'
import {BACK_URL} from '@/config/cachekey'
import {getWxCode, getUserProfile} from '@/utils/login'

const loginType = {
  ACCOUNT_LOGIN: 0,
  SMS_CODE_LOGIN: 1
}
export default {
  data() {
    return {
      password: '',
      account: '',
      code: '',
      isWeixin: '',
      loginType: 0,
      smsCode: '',
      time: 59,
      canSendSms: true,
      telephone: '',
      text: '',
      showLoginPop: false,
      isAgree: false,
      showModel: false,
      isPhonelogin: 1,
      showPrivacyPopup: true //微信用户隐私协议
    }
  },

  async onLoad(option) {
    // #ifdef H5
    // H5微信登录
    this.isWeixin = isWeixinClient()
    if (this.isLogin) {
      uni.switchTab({
        url: '/pages/index/index'
      })
      return
    }
    if (this.isWeixin) {
      const {code} = option
      if (code) {
        const data = await wechath5.authLogin(code)
        this.loginHandle(data)
      } else {
        // wechath5.getWxUrl()
      }
    }
    // #endif
    // #ifdef MP-WEIXIN
    if (wx.getPrivacySetting) {
      wx.getPrivacySetting({
        success: (res) => {
          console.log(res, '------') // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
          if (res.needAuthorization) {
            // 需要弹出隐私协议
            setTimeout(() => {
              uni.hideTabBar()
            }, 100)
            this.showPrivacyPopup = true
          } else {
            uni.showTabBar()
          }
        },
        fail: (err) => {
          uni.showTabBar()
          console.log(err)
        }
      })
    } else {
      uni.showTabBar()
    }

    // #endif
  },
  onUnload() {
    if (this.loginFlag) {
      this.LOGOUT()
    }
  },
  methods: {
    ...mapMutations(['LOGIN', 'LOGOUT']),
    ...mapActions(['getUser']),
    countDownFinish() {
      this.canSendSms = true
    },
    // 公众号获取code
    getCodeUrl() {
      if (!this.isAgree) {
        this.showModel = true
        return
      }
      wechath5.getWxUrl()
    },
    // 小程序登录
    async mnpLoginFun() {
      if (!this.isAgree) {
        this.showModel = true
        return
      }
      const {
        userInfo: {avatarUrl, nickName, gender}
      } = await getUserProfile()
      uni.showLoading({
        title: '登录中...',
        mask: true
      })
      const wxCode = await getWxCode()
      const {code, data, msg} = await authLogin({
        code: wxCode,
        nickname: nickName,
        headimgurl: avatarUrl
      })
      if (code == 1) {
        //
        if (data.is_new_user) {
          uni.hideLoading()
          this.showLoginPop = true
          this.loginData = data
        } else {
          this.loginHandle(data)
        }
      } else {
        this.$toast({
          title: msg
        })
      }
    },
    // 账号登录
    async loginFun() {
      const {account, password, telephone, smsCode} = this
      if (!this.isAgree) {
        this.showModel = true
        return
      }
      if (this.loginType == 0) {
        const {code, data} = await accountLogin({
          account,
          password,
          client: client
        })
        if (code == 1) {
          this.loginHandle(data)
        }
      } else {
        if (!telephone) {
          this.$toast({
            title: '请填写手机号'
          })
          return
        }
        if (!smsCode) {
          this.$toast({
            title: '请填写手机验证码'
          })
          return
        }
        smsCodeLogin({
          account: telephone,
          code: smsCode
        }).then((res) => {
          if (res.code == 1) {
            this.loginHandle(res.data)
          }
        })
      }
    },
    // 登录结果处理
    async loginHandle(data) {
      this.LOGIN(data)
      uni.hideLoading()
      const inviteCode = Cache.get('INVITE_CODE')
      if (inviteCode) {
        inputInviteCode({
          code: inviteCode
        })
      }
      // #ifdef H5
      location.replace('/mobile' + (Cache.get(BACK_URL) || '/'))
      Cache.remove(BACK_URL)
      //#endif
      // #ifndef H5
      uni.navigateBack({
        success() {
          // 刷新上一页
          const {onLoad, options} = currentPage()
          onLoad && onLoad(options)
        }
      })
      //#endif
    },
    changeLoginType() {
      if (this.loginType == loginType.ACCOUNT_LOGIN) {
        this.loginType = loginType.SMS_CODE_LOGIN
      } else if (this.loginType == loginType.SMS_CODE_LOGIN) {
        this.loginType = loginType.ACCOUNT_LOGIN
      }
    },
    // 发送验证码
    $sendSms() {
      if (this.canSendSms == false) {
        return
      }
      if (!this.telephone) {
        this.$toast({
          title: '请填写手机号信息～'
        })
        return
      }

      sendSms({
        mobile: this.telephone,
        key: SMSType.LOGIN
      }).then((res) => {
        if (res.code == 1) {
          this.canSendSms = false
          this.$refs.countDown.start()
          this.$toast({
            title: res.msg
          })
        }
      })
    },
    // app微信登录
    async appWxLogin() {
      if (!this.isAgree) {
        this.showModel = true
        return
      }
      uni.login({
        provider: 'weixin',
        success: (res) => {
          uni.showLoading({
            title: '登录中...',
            mask: true
          })
          const {openid, access_token} = res.authResult
          opLogin({
            openid,
            access_token
          }).then((res) => {
            uni.hideLoading()
            if (res.code == 1) {
              this.loginHandle(res.data)
            }
          })
        }
      })
    },
    async handleSubmitInfo(e) {
      const loginData = this.loginData || {}
      const res = await updateUser(e, loginData.token)
      if (res.code == 1) {
        this.loginHandle(loginData)
      }
    },
    closePopup() {
      this.showLoginPop = false
    },
    /**
     * @description 同意协议
     */
    changeChecked() {
      this.isAgree = !this.isAgree
    }
  },
  computed: {
    ...mapGetters(['appConfig']),
    inactive() {
      if (this.loginType == 0) {
        return !this.account || !this.password ? true : false
      } else {
        return this.telephone.length !== 11 || !this.smsCode ? true : false
      }
    }
  }
}
</script>
<style lang="scss">
page {
   background-image: url("../../static/images/login_bg.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  .login {
    height: 100vh;

    .mpwx-login {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 50rpx;

      .logo {
        width: 180rpx;
        height: 180rpx;

        margin-top: 200rpx;
      }

      .btn {
        background-color: #0066ff;
        width: 100%;
        margin: 200rpx auto 0;
        height: 92rpx;
        font-size: 34rpx;
        border-radius: 48rpx;
      }
    }

    .account-login {
      padding-top: 100rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      box-sizing: border-box;
      padding-left: 60rpx;
      padding-right: 60rpx;

      .logo {
        width: 180rpx;
        height: 180rpx;
        margin-bottom: 50rpx;
        margin-top: 50rpx;
      }

      .btn {
        background-color: #0066ff;
        width: 100%;
        margin-top: 200rpx;
        height: 100rpx;
      }

      .phonebtn {
        border: $-solid-border;
        margin-top: 50rpx;
        width: 100%;
        height: 100rpx;
      }

      .input {
        height: 100rpx;
        border-radius: 10rpx;
        width: 670rpx;
        border: $-solid-border;
        margin-top: 30rpx;
      }

      .sms-btn {
        border: 1px solid $-color-primary;
        width: 176rpx;
        height: 60rpx;
        box-sizing: border-box;
      }

      .wx-login {
        margin-top: 60rpx;

        .image {
          margin-top: 40rpx;
          width: 80rpx;
          height: 80rpx;
        }
      }
    }
  }
}

.comfirm-box {
  text-align: center;
  padding: 60rpx 0 70rpx 0;
}

.agreement {
  color: #0066ff;
}

.inactive {
  opacity: 0.5;
}
.title{
  margin: 0 auto;
  font-size: 72rpx;
  font-weight: bold;
}
.service{
  color:#808589;
  font-size: 26rpx;
  margin-top: 40rpx;
}
.title-info{
  text-align: center;
}
.primary{
  color: #0066ff;
}
.sm-24{
  font-size: 24rpx;
  color: #919191;
}
</style>
